<template>
	<view class="content">
		<uni-nav-bar 
			background-color="#4a87b6" 
			color="white" 
			title="修改信息"
			left-icon="closeempty"
			@clickLeft="back()"
		></uni-nav-bar>
		<view class="updateContent">
			<view class="opt" id="title">
				<text>头像</text>
				<image :src="userInfo.url" mode="aspectFill"  @tap="updateTitleImage"></image>
				<hjy-image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></hjy-image-cropper>
				<span><uni-icons type="right" size="20" color="#4a87b6"></uni-icons></span>
			</view>
			<view class="opt" @click="toUpdate(1)">
				<text>你的名字</text>
				{{userInfo.name}}
				<span><uni-icons type="right" size="20" color="#4a87b6"></uni-icons></span>
			</view>
			<view class="opt" @click="toUpdate(2)">
				<text>格言</text>
				{{userInfo.sign}}
				<span><uni-icons type="right" size="20" color="#4a87b6"></uni-icons></span>
			</view>
			<view class="opt" @click="messageToggle()">
				<text>邮箱</text>
				{{userInfo.email}}
				<span><uni-icons type="right" size="20" color="#4a87b6"></uni-icons></span>
			</view>
			<view class="opt" @click="updateGender()">
				<text>性别</text>
				{{userInfo.gender | formatSex}}
				<span><uni-icons type="right" size="20" color="#4a87b6"></uni-icons></span>
			</view>
			<view class="opt" @click="updateAge()">
				<text>年龄</text>
				{{ageList[userInfo.age-1]}}
				<span><uni-icons type="right" size="20" color="#4a87b6"></uni-icons></span>
			</view>
			
		</view>
		<view class="bottomFont">陪你一起成长</view>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog 
					ref="inputClose"  
					mode="input" 
					:title="dialogInfo.title" 
					:value="dialogInfo.content"
					placeholder="请输入内容" 
					@confirm="dialogInputConfirm">
				</uni-popup-dialog>
			</uni-popup>
		</view>
		<uni-popup ref="popup" type="dialog" >
			<view class="genderList">
				<view class="man" @click="toUpdateGender('男')">
					男
				</view>
				<view class="woman" @click="toUpdateGender('女')">
					女
				</view>
			</view>
		</uni-popup>
		
		<!-- 年龄选择 -->
		<uni-popup ref="buttomDialog" type="dialog">
			<view class="ageList">
				<view class="hint">请选择你的[年龄段]</view>
				<view v-for="(item,index) in ageList" class="ageItem" @click="toUpdateAge(index+1)" :key="index">
					{{item}}
				</view>
			</view>
			<view class="cancel" @click="cancelUpdateAge()">
				取消
			</view>
		</uni-popup>
		<!-- 邮箱提示信息 -->
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message type="info" message="功能暂未开放" ></uni-popup-message>
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from 'image-tools'
	import {updateUserById,getUserInfoById} from '@/api/user.js'
	export default {
		data() {
			return {
				id:"",
				token:"",
				userInfo:{
					url:"https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/aiImage/83baf06f16c033aa986b805d1be825e.png",
					name:"邀约",
					sign:"愿我遇良人,愿你常开心",
					email:"1150082783@qq.com",
					gender:"男",
					age:"00后的小可爱"
				},
				dialogInfo:{
					title:"",
					content:"",
					opt:""
				},
				ageList:[
					"70后","80后的小可爱","85后的小可爱","90后的小可爱","95后的小可爱","00后的小可爱","05后的小可爱","幼年","中年年人"
				],
				tempFilePath: '',
				cropFilePath: '',
				titlePath:""
			};
		},
		filters:{
			// 格式化性别
			formatSex: function(str) {
				const sexEnum = {
				    "0": "女",
				    "1": "男",
				    }
				return sexEnum[str];
				},
			},
		onLoad() {
			this.getMessage()
			this.getUserInfo()
		},
		methods:{
			getMessage(){
				this.id=uni.getStorageSync("id"),
				this.token=uni.getStorageSync("authorization")
			},
			back(){
				uni.navigateTo({
					url:'/pages/me/me'
				})
			},
			toUpdate(val){
					if (val == 1) {
						this.dialogInfo.title = "修改名字"
						this.dialogInfo.content = this.userInfo.name
						this.dialogInfo.opt = val
						
						this.inputDialogToggle()
					}else if(val == 2){
						this.dialogInfo.title = "修改格言"
						this.dialogInfo.content = this.userInfo.sign
						this.dialogInfo.opt = val
						this.inputDialogToggle()
					}
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				console.log(this.dialogInfo.opt)
				// 等于1是name update
				if(this.dialogInfo.opt==1){
					const data = {
						"id":this.id,
						"nickName":val,
						"token":this.token
					}
					this.update(data);
				}else if(this.dialogInfo.opt == 2){ // 等于2是sign 的update
					const data = {
						"id":this.id,
						"sign":val,
						"token":this.token
					}
					this.update(data);
				}
				console.log(val)
			},
			updateGender(){
				this.$refs.popup.open()
			},
			toUpdateGender(val){
				console.log(val)
				
				if(val == '男'){
					const data = {
						"id":this.id,
						"gender":"1",
						"token":this.token
					}
					this.update(data);
				}else if(val == '女'){
					const data = {
						"id":this.id,
						"gender":"0",
						"token":this.token
					}
					this.update(data);
				}
				
				this.$refs.popup.close()
			},
			updateAge(){
				
				this.$refs.buttomDialog.open('bottom')
			},
			toUpdateAge(val){
				console.log(val)
				const data = {
					"id":this.id,
					"age":val,
					"token":this.token
				}
				this.update(data);
				this.$refs.buttomDialog.close()
			},
			cancelUpdateAge(){
				this.$refs.buttomDialog.close()
			},
			messageToggle() {
				this.$refs.message.open()
			},
			updateTitleImage(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift()
					}
				});
			},
			// 对app和h5不同的图片进行转换
			confirm(e) {
				this.tempFilePath = ''
				this.cropFilePath = e.detail.tempFilePath
				const isImg = this.hasDataPrefix(this.cropFilePath)
				if(isImg == 1){
					console.log("图片是base64")
					base64ToPath(e.detail.tempFilePath)
					  .then(path => {
						
						this.userInfo.url = path
						this.titlePath = path
						console.log("转换后的地址"+this.titlePath)
						this.handleUpload(this.titlePath)
					  })
					  .catch(error => {
					    console.error(error)
					  })
				}else{
					console.log("图片是url")
					this.titlePath = e.detail.tempFilePath
					this.userInfo.url = e.detail.tempFilePath
					console.log("地址"+this.titlePath)
					this.handleUpload(this.titlePath)
				}
				
				
			},
			cancel() {
				console.log('canceled')
			},
			hasDataPrefix(str) {  
			    return str.startsWith('data');  
			},
			// 获取用户详情
			getUserInfo(){
				getUserInfoById({
					"id":this.id,
					"token":this.token
				}).then(res=>{
					if(res.data.data!=null){
						const user = res.data.data
						this.userInfo.url=user.imgUrl,
						this.userInfo.name=user.nickname,
						this.userInfo.sign=user.sign,
						this.userInfo.email=user.email,
						this.userInfo.gender=user.gender,
						this.userInfo.age=user.age
					}
				})
			},
			// 上传图片
			handleUpload:async function(e){
				console.log(e)
				uni.showLoading({
					title: '上传中'
				});
				const res = await uniCloud.uploadFile({
					filePath:e,
					cloudPathAsRealPath:true,
					cloudPath:"titleImg/user/"+this.id+"/titleImg"+Date.now()+".png"
					
				}).then(res=>{
					uni.hideLoading();
					if(res.success){
						const newUrl = res.fileID
						const data = {
							"id":this.id,
							"imgUrl":newUrl,
							"token":this.token
						}
						this.update(data);
					}
					
				})
			},
			// data :json
			update(data){
				uni.showLoading({
					title: '正在更新~'
				});
				updateUserById(data).then(res=>{
					uni.hideLoading();
					this.$router.go(0)
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ffffff;
}
.content{
	.updateContent{
		.opt{
			width: 100%;
			height: 8vh;
			border-bottom: 1px solid #e8e8e8;
			display: flex;   
			align-items: center;
			color: #747474;
			text{
				font-size: 2.3vh;
				color: #747474;
				margin-left: 5%;
				text-align: center;
				display: flex;
				align-items: center;
				height: 100%;
				width: 20%;
				margin-right: 10%;
			}
			span{
				margin-left: auto;
				margin-right: 0;
			}
			
		}
		#title{
			image{
				width: 7vh;
				height: 7vh;
				border-radius: 7vh;
			}
			button::after{
			    border:none;
				background-color: #0c7de5;
			}
		}
	}
	.genderList{
		width: 720rpx;
		height: 30vh;
		background-color: $bg-gary;
		display: flex;  /* 设置display为flex */  
		flex-direction: row;  /* 设置flex的方向为行 */  
		justify-content: space-between;  /* 在行内的元素之间创建空间，使它们均匀分布 */
		border-radius: 50rpx;
		view{
			flex: 1;  /* 使两个视图在flex容器中平均分配空间 */ 
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16vh;
			color: #717171;
			border: 1px solid #717171;
			font-family: "宋体";
			
		}
	}
	.ageList{
		width: 100%;
		height: 70vh;
		background-color: white;
		border-radius: 30rpx 30rpx 0 0;
		.hint{
			color: #9b9b9b;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 5vh;
			border-bottom:1px solid #717171;
		}
		.ageItem{
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom:1px solid #e5e5e5;
			height: 6vh;
			color: #0c7de5;
		}
		.ageItem:active{
			background-color: #e5e5e5;
		}
		
	}
	.cancel{
		display: flex;
		justify-content: center;
		align-items: center;
		color: #0c7de5;
		background-color: white;
		border-top:5px solid #e5e5e5;
		height: 5vh;
	}
	.cancel:active{
		background-color: #e5e5e5;
	}
	.bottomFont{
		width: 100%;
		position: absolute;
		bottom: 0;
		text-align: center;
		color: $font-gray;
		font-size: 1.6vh;
	}
}
</style>
